<template>
	<view>
		<view class="input-box">
			<view class="input-item">
			    <view class="input-label">手机号</view>
				<view class="input-body">
					<input v-model="phone" maxlength="11" type="number" style="margin-right: 160rpx;" placeholder="请输入手机号" class="input" >
					<!-- <button :disabled="!isCanSendCode" class="btn-code"  @click="sendCode">{{sendMsg}}</button> -->
				</view>
			</view>
			<!-- <view class="input-item">
				<view class="input-label">验证码</view>
				<view class="input-body">
					<input placeholder="请输入验证码" type="number" v-model="code" maxlength="6" class="input">
				</view>
			</view> -->
			<view class="input-item">
				<view class="input-label">密码</view>
				<view class="input-body">
					<input v-model="password" type="text" :password="isHidePassword?true:false" style="margin-right: 50rpx;" placeholder="请输入密码" maxlength="20"  class="input" />
					<image @click="isHidePasswordClick" class="eye" :src="isHidePassword?'/static/img/attention.png':'/static/img/attention_forbid.png'"></image>
				</view>
			</view>
			<view class="input-item">
				<view class="input-label">确认密码</view>
				<view class="input-body">
					<input v-model="passwordSend" type="text" :password="isHidePasswordTwo?true:false" style="margin-right: 50rpx;" placeholder="请确认密码" maxlength="20"  class="input" />
					<image @click="isHidePasswordClickTwo" class="eye" :src="isHidePasswordTwo?'/static/img/attention.png':'/static/img/attention_forbid.png'"></image>
				</view>
			</view>
		</view>
		<button class="button" @click="submit">修改密码</button>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	let timer = '';
	export default {
		data() {
			return {
				sendMsg:"发送验证码",
				isCanSendCode:true,
				isHidePassword:true,
				isHidePasswordTwo:true,
				phone:"",
				password:"",
				passwordSend:"",
				code:""
			};
		},
		onLoad() {
		},
		methods: {
			
			updatePasswd() {
				var that = this;
				uni.showLoading({"title":"数据加载中..."});
				var cookie =  uni.getStorageSync('cookie');
				uni.request({
					url: this.$common.baseUrl +'api/OauthController/updatePasswd',
					header: {'content-type': 'application/x-www-form-urlencoded','cookie':cookie},
					data: {
						phone:this.phone,
						passwd1:this.password,
						passwd2:this.passwordSend
					},
					method: 'POST',
					success: res=>{
						uni.hideLoading();
						if(res.data.code == 1){
							this.$refs.uTips.show({
								title: '操作成功',
								type: 'warning',
								duration: '2300'
							})
							uni.redirectTo({url:'/pages/my/my'})							
							return false;
						}else{
							this.$refs.uTips.show({
								title: '操作失败',
								type: 'warning',
								duration: '2300'
							})
							return false;
						}
					},
					fail: err=>{
						uni.hideLoading();
					}
				})
			},
			
			isHidePasswordClick(){
				this.isHidePassword=!this.isHidePassword
			},
			isHidePasswordClickTwo(){
				this.isHidePasswordTwo=!this.isHidePasswordTwo
			},
			setCodeInterval () {
			    let time = 60;
			    clearInterval(timer);
			    timer = setInterval(() => {
			        time--;
			        this.isCanSendCode=false;
			        this.sendMsg=time + "s"
			        if (time <= 0) {
			            this.isCanSendCode=true;
			            this.sendMsg="重新获取";
			            clearInterval(timer);
			        }
			    }, 1000)
			},
			clearCodeInterval(){
			    clearInterval(timer);
			    this.codemsg="获取验证码";
			},
			checkPhone(value){
				let reg =/^1\d{10}$/
				if(reg.test(value)){
					return true;
				}
				this.$refs.uTips.show({
					title: '手机号格式不对',
					type: 'error',
					duration: '2300'
				})
				return false
			},
			checkPwd(value){
				if(value.length>=6){
					return true;
				}
				this.$refs.uTips.show({
					title: '密码必须大于6位',
					type: 'error',
					duration: '2300'
				})
				return false
			},
			checkCode(value){
				if(value.length==6){
					return true;
				}
				this.$refs.uTips.show({
					title: '验证码必须是6位数字',
					type: 'error',
					duration: '2300'
				})
				return false
			},
			sendCode () {
			    if (!this.checkPhone(this.phone)) {
			        return
			    }
			    this.setCodeInterval();
			},
			submit() {
				if(!this.checkPhone(this.phone)){
					return;
				};
				// if(!this.checkCode(this.code)){
				// 	return;
				// }
				if(!this.checkPwd(this.password)){
					return;
				};
				if(!this.checkPwd(this.passwordSend)){
					return;
				};
				if(this.password !== this.passwordSend){
					this.$refs.uTips.show({
						title: '俩次密码需相同',
						type: 'warning',
						duration: '2300'
					})
					return false;
				}
				
				this.updatePasswd();
				// uni.reLaunch({
				// 	url:'/pages/index/index'
				// })
			}
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	button::after{
		border: none;
	}
	.input-box {
		padding: 50rpx;
		font-size: 30rpx;
		.input-item {
			display: flex;
			background: white;
			border-bottom: 1rpx solid #eeeeee;
			line-height: 100rpx;
			height: 100rpx;
			.input-label {
				width: 150rpx;
			}
			.input-body{
				position: relative;
				height: 100rpx;
				width: calc(100% - 150rpx);
				.input {
					line-height: 100rpx;
					height: 100rpx;
					position: relative;
					font-size: 28rpx;
				}
				.eye{
					position: absolute;
					height: 50rpx;
					width: 50rpx;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
				.btn-code{
				    position: absolute;
				    right: 0rpx;
				    top:50%;
				    transform: translateY(-50%);
					background: none;
					color: #205592;
					width: 160rpx;
					font-size: 24rpx;
					box-sizing: border-box;
					text-align: right;
					padding: 0;
					height: 100rpx;
					line-height: 100rpx;
				}
			}
			
		}
		.select {
			padding-top: 40rpx;
			display: flex;
			justify-content: space-between;
			color: #003B67;
		}
	}
	.button{
		margin:0 30rpx;
		background: #68B92E;
		border-radius:50rpx;
		line-height: 80rpx;
		height: 80rpx;
		color: white;
		font-size: 32rpx;
	}
</style>
